<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
    custom-class="ba-operate-dialog cu-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate! == 'print'"
        @close="onClosed();"
        @open="onOpen"
        destroy-on-close
        :fullscreen="true"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">打印</div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
            >
                <div id="print-content" ref="prinfDom">
                    <div class="row">
                        <div class="left">编号:{{baTable.form.items!.no}}</div>
                        <div class="right">
                            <div class="tile-label">报账单 Cash Reimburse</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="left">公司名称:</div>
                        <div class="right">{{baTable.form.items!.date}}</div>
                    </div>
                    <div class="row">
                        <table>
                            <tr>
                                <td width="120">报账人</td>
                                <td>{{baTable.form.items!.user_name}}</td>
                                <td  width="120">所属部门</td>
                                <td width="120"></td>
                                <td width="100">项目编号</td>
                                <td width="120"></td>
                            </tr>
                            <tr>
                                <td>报账内容</td>
                                <td>{{baTable.form.items!.title}}</td>
                                <td>联系电话</td>
                                <td>{{baTable.form.items!.user ? baTable.form.items!.user.mobile ?? "" : ""}}</td>
                                <td>项目名称</td>
                                <td>{{baTable.form.items!.project ? baTable.form.items!.project.title : ""}}</td>
                            </tr>
                            <tr>
                                <td>收款人</td>
                                <td colspan="2"></td>
                                <td>开户银行</td>
                                <td colspan="2"></td>
                            </tr>
                            <tr>
                                <td>银行账户名称</td>
                                <td colspan="2"></td>
                                <td>银行账号</td>
                                <td colspan="2"></td>
                            </tr>
                            <tr>
                                <td rowspan="2">附明细单据</td>
                                <td colspan="3">
                                    人民币大写: ￥ {{baTable.form.items!.convertMoney}}
                                </td>
                                <td colspan="2">
                                    ￥:{{ baTable.form.items!.amount.toLocaleString() }}
                                </td>
                            </tr>
                            <tr>
                                <td>币种:人民币</td>
                                <td>付款方式:转账</td>
                                <td>金额:{{ baTable.form.items!.amount.toLocaleString() }}</td>
                                <td colspan="2">汇率Rate:</td>
                            </tr>
                        </table>
                    </div>
                    <div class="row sign-row">
                        <div>总监:</div>
                        <div>财务:</div>
                        <div>复核:</div>
                        <div>审核:</div>
                        <div>项目负责人:{{baTable.form.items!.project ? baTable.form.items!.project.manager.nickname : ""}}</div>
                        <div>报账人:{{baTable.form.items!.user_name}}</div>
                    </div>
                    <div class="row" style="padding-top: 50px;">
                        <div class="right">编号:{{baTable.form.items!.no}}</div>
                        <div class="left" style="text-align: center; font-weight: bold;">
                            相关明细单
                        </div>
                    </div>
                    <div class="row">
                        <table class="table2">
                            <tr>
                                <th :key="index" v-for="item, index in details_col">{{ item.title }}</th>
                            </tr>
                            <tr :key="index" v-for="item, index in details_lists.datas">
                                <td :key="ii" v-for="col,ii in details_col">{{ item[col.field]}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <template #footer>
            <div>
                <el-button @click="onClosed()">关闭</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="toPrint" type="primary">打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, reactive, ref, onMounted, nextTick } from 'vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { timeFormat, convertCurrency } from '/@/utils/common'
import printJS from '/@/js-sdk/print.js'

const config = useConfig()
const baTable = inject('baTable') as baTableClass
const prinfDom = ref()
const details_col = [
    { title:'费用编号', field: 'f0'},
    { title:'费用二级', field: 'f1'},
    { title:'日期', field: 'f2'},
    { title:'事由', field: 'f3'},
    { title:'起点', field: 'f4'},
    { title:'终点', field: 'f5'},
    { title:'金额', field: 'f6'},
    { title:'发票', field: 'f7'},
    { title:'发票号', field: 'f8'},
    { title:'是否抵扣', field: 'f9'},
    { title:'抵扣后金额', field: 'f10'},
    { title:'附件', field: 'f11'},
    { title:'付款状态', field: 'f12'},
]
let details_lists = reactive({
    datas: []
});
onMounted(() => {
    
})

const onOpen = () => {
    if(!baTable.form.items!.no) baTable.form.items!.date = timeFormat(null, 'yyyy-mm-dd')
    baTable.form.items!.convertMoney = convertCurrency(baTable.form.items!.amount)

    try {
        details_lists.datas = JSON.parse(baTable.form.items!.detail)
    } catch (error) {
        details_lists.datas = []
    }
}

const toPrint = () => {
    printJS('#print-content')
}

const onClosed = () => {
    details_lists.datas = []
    baTable.toggleForm()
}

</script>

<style lang="scss">
    .el-dialog.cu-dialog.is-fullscreen { overflow: hidden; }
    .el-dialog.cu-dialog.is-fullscreen  .el-dialog__body { height: calc(100vh - 60px);  }
</style>
<style scoped lang="scss">
    .ba-operate-dialog :deep .el-dialog__body { padding-bottom: 0; height: calc(100vh - 100px); }
</style>
<style scoped>
 #print-content {}
 .row { overflow: hidden; padding: 5px 0;}
 .row .left { float: left; }
 .row .right { float: right; }
 table {     border-collapse: collapse; width: 100%;font-size: 12px;}
 table td,
 table th { border: 1px solid #ddd; padding: 5px; }
 .sign-row div { width: 16%; float: left; font-size: 12px;}

 .table2 { }
 .table2 td,
 .table2 th { border-left: 0;border-right: 0; text-align: left;}
 
 .table2 th { font-weight: normal;  }
 @media print {
    * {
        font-size: 9px;
    }
 }
</style>